<template>
  <div id="splash">
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:leave="leave"
    >
      <div class="welcome" v-show="isShow">
        <h2>欢迎使用OA系统</h2>
        <em>v1.0</em>
      </div>
    </transition>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isShow: false
      }
    },
    mounted () {
      this.isShow = true
      setTimeout(() => {
         this.isShow = false
      }, 4000)
    },
    methods: {
      leave: function () {
        this.$router.replace({path: '/login'})
      },
      beforeEnter: function () {

      },
      enter: function () {

      },
      afterEnter: function () {

      }
    }
  }
</script>
<style scoped lang="scss">
  @import '../base/css/base.scss';
  #splash {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity .3s ease;
    box-sizing: border-box;
    background: url("../assets/login_bg.png") no-repeat center/cover;
    .welcome {
      margin: 200px auto;
      text-align: center;
      color: #fff;
      padding: 50% 0;
      h2 {
        @include fz(10px);
      }
      em {
        @include fz(7px);
        text-align: right;
      }
    }
  }

  .welcome-enter-active, .welcome-leave-active {
    transition: all .25s ease-in-out;
    transform:rotate(360deg) scale(1.2);
  }
  .welcome-enter, .welcome-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
